<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家庭成员</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../../../css/amazeui.css"/>
    <link rel="stylesheet" href="../../../css/im.css"/>
    <script src="../../../js/jquery-1.4.2.min.js"></script>
    <script src="../../../js/iscroll.js"></script>
    <style>
        #wrapper {
            position: absolute;
            z-index: -1;
            top: 35px;
            bottom: 0em;
            left: 0;
            width: 100%;
            overflow: inherit;

        }

        #scroller {
            position: absolute;
            z-index: -1;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            width: 100%;
            padding: 0px;
        }
    </style>

    <!--下拉框-->
    <script>
        var arr = ['123', '123', '123'];
        var arr3 = ['本人或户主', '配偶', '之子', '之女', '之儿媳', '之女婿', '之孙子', '之孙女', '之外孙子', '之外孙女', '之父', '之母', '之岳父', '之岳母', '之公公', '之婆婆', '之祖父', '之祖母', '之外祖父', '之外祖母', '其他'];
        var arr4 = ['阿昌族', '白族', '保安族', '布朗族', '布依族', '朝鲜族', '达斡尔族', '傣族', '德昂族', '侗族', '东乡族', '独龙族', '鄂伦春族', '俄罗斯族', '鄂温克族', '高山族', '仡佬族', '哈尼族', '哈萨克族', '赫哲族', '回族', '基诺族', '京族', '景颇族', '柯尔克孜族', '拉祜族', '黎族', '傈僳族', '珞巴族', '满族', '毛南族', '门巴族', '蒙古族', '苗族', '仫佬族', '纳西族', '怒族', '普米族', '羌族', '撒拉族', '畲族', '水族', '塔吉克族', '塔塔尔族', '土族', '土家族', '佤族', '维吾尔族', '乌兹别克族', '锡伯族', '瑶族', '彝族', '裕固族', '藏族', '壮族', '其他'];
        var arr6 = ['非在校生', '学前教育', '小学', '七年级', '八年级', '九年级', '高中一年级', '高中二年级', '高中三年级', '中职一年级', '中职二年级', '中职三年级', '高职一年级', '高职二年级', '高职三年级', '大专及以上'];
        var arr12 = ['中共党员', '中共预备党员', '共青团员', '民革会员', '民盟盟员', '民建会员', '民进会员', '农工党党员', '致公党党员', '九三学社社员', '台盟盟员', '无党派民主人士', '群众'];
        $(document).ready(function () {
            var _select1 = document.getElementById("info1");
            var _select2 = document.getElementById("info2");
            var _select3 = document.getElementById("info3");
            var _select4 = document.getElementById("info4");
            var _select5 = document.getElementById("info5");
            var _select6 = document.getElementById("info6");
            var _select7 = document.getElementById("info7");
            var _select8 = document.getElementById("info8");
            var _select9 = document.getElementById("info9");
            var _select10 = document.getElementById("info10");
            var _select11 = document.getElementById("info11");
            var _select12 = document.getElementById("info12");
            var _select13 = document.getElementById("info13");
            var i;

            for (i = 0; i < arr3.length; i++) {
                _select3 += '<option>' + arr3[i] + '</option>';
            }
            $('#info3').append(_select3);

            for (i = 0; i < arr4.length; i++) {
                _select4 += '<option>' + arr4[i] + '</option>';
            }
            $('#info4').append(_select4);

            for (i = 0; i < arr6.length; i++) {
                _select6 += '<option>' + arr6[i] + '</option>';
            }
            $('#info6').append(_select6);

            for (i = 0; i < arr12.length; i++) {
                _select12 += '<option>' + arr12[i] + '</option>';
            }
            $('#info12').append(_select12);


        });

    </script>
    <script>
        var myScroll;
        myScroll = new iScroll('wrapper', {
            useTransition: true,
            hScroll: false,
            topOffset: 0,
            y: 0
        }, 100);
        document.addEventListener('touchmove', function (e) {
            e.preventDefault();
        }, false);

        document.addEventListener('DOMContentLoaded', function () {
            setTimeout(loaded, 200);
        }, false);

    </script>
</head>
<body>
<div class="am-tabs">
    <!--导航栏-->
    <ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify am-topbar-fixed-top">
        <li id="tabOne" class="am-active"><a id="title">家庭成员</a></li>
    </ul>
    <!--滚动部分-->
    <div id="wrapper" class="am-tabs-bd topPadding">
        <div id="scroller" class="am-tab-panel am-active">
            <br>
            <table class="am-table am-text-middle am-table-nobordered am-table-compact">
                <tbody>
                <tr>
                    <th>姓名</th>
                    <th>
                        <form>
                            <input type="text" style="width: 200px" class="am-form-field im-fp-input">
                        </form>
                    </th>
                </tr>
                <tr>
                    <th>性别</th>
                    <th>
                        <form>
                            <div class="btn-select" id="btn_select_1">
                                <span class="cur-select">请选择</span>
                                <select id="info1" onclick="OC_1(this.id)" onchange="OC_1(this.id)">
                                    <option>男</option>
                                    <option>女</option>
                                </select>
                            </div>
                        </form>
                    </th>
                </tr>

                <tr>
                    <th>证件类型</th>
                    <th>
                        <div class="btn-select" id="btn_select_2">
                            <span class="cur-select">请选择</span>
                            <select id="info2" onclick="OC_1(this.id)" onchange="OC_1(this.id)">
                                <option>居民身份证(户口本)</option>
                                <option>中国人民解放军军官证</option>
                                <option>残疾人证</option>
                            </select>
                        </div>

                    </th>
                </tr>
                <tr>
                    <th>证件号码</th>
                    <th>
                        <form>
                            <input type="text" style="width: 200px" class="am-form-field im-fp-input">
                        </form>
                    </th>
                </tr>

                <tr>
                    <th>出生年月</th>
                    <th>
                        <form>
                            <input type="text" style="width: 200px" class="am-form-field im-fp-input">
                        </form>
                    </th>
                </tr>
                <tr>
                    <th>与户主关系</th>
                    <th>
                        <div class="btn-select" id="btn_select_3">
                            <span class="cur-select">请选择</span>
                            <select id="info3" onclick="OC_1(this.id)" onchange="OC_1(this.id)">
                            </select>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th>名族</th>
                    <th>
                        <div class="btn-select" id="btn_select_4">
                            <span class="cur-select">请选择</span>
                            <select id="info4" onclick="OC_1(this.id)" onchange="OC_1(this.id)">

                            </select>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th>文化程度</th>
                    <th>
                        <div class="btn-select" id="btn_select_5">
                            <span class="cur-select">请选择</span>
                            <select id="info5" onclick="OC_1(this.id)" onchange="OC_1(this.id)">
                                <option>文盲或半文盲</option>
                                <option>小学</option>
                                <option>初中</option>
                                <option>大专及以上</option>
                                <option>学龄前儿童</option>
                            </select>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th>在校生状况</th>
                    <th>
                        <div class="btn-select" id="btn_select_6">
                            <span class="cur-select">请选择</span>
                            <select id="info6" onclick="OC_1(this.id)" onchange="OC_1(this.id)">
                            </select>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th>劳动能力</th>
                    <th>
                        <form>
                            <div class="btn-select" id="btn_select_7">
                                <span class="cur-select">请选择</span>
                                <select id="info7" onclick="OC_1(this.id)" onchange="OC_1(this.id)">
                                    <option>普通劳动力</option>
                                    <option>技能劳动力</option>
                                    <option>丧失劳动力</option>
                                    <option>无劳动力</option>
                                </select>
                            </div>
                        </form>
                    </th>
                </tr>
                <tr>
                    <th>务工状况</th>
                    <th>
                        <div class="btn-select" id="btn_select_8">
                            <span class="cur-select">请选择</span>
                            <select id="info8" onclick="OC_1(this.id)" onchange="OC_1(this.id)">
                                <option>乡（镇）内务工</option>
                                <option>乡（镇）外县内务工</option>
                                <option>县外省内务工</option>
                                <option>省外务工</option>
                                <option>其他</option>
                            </select>
                        </div>
                    </th>
                </tr>

                <tr>
                    <th>务工时间</th>
                    <th>
                        <form>
                            <input type="text" style="width: 200px" class="am-form-field im-fp-input">
                        </form>
                    </th>
                </tr>

                <tr>
                    <th>是否现役军人</th>
                    <th>
                        <form>
                            <div class="btn-select" id="btn_select_9">
                                <span class="cur-select">请选择</span>
                                <select id="info9" onclick="OC_1(this.id)" onchange="OC_1(this.id)">
                                    <option>是</option>
                                    <option>否</option>
                                </select>
                            </div>
                        </form>
                    </th>
                </tr>
                <tr>
                    <th>是否大病保险</th>
                    <th>
                        <form>
                            <div class="btn-select" id="btn_select_10">
                                <span class="cur-select">请选择</span>
                                <select id="info10" onclick="OC_1(this.id)" onchange="OC_1(this.id)">
                                    <option>是</option>
                                    <option>否</option>
                                </select>
                            </div>
                        </form>
                    </th>
                </tr>
                <tr>
                    <th>健康状况</th>
                    <th>
                        <form>
                            <div class="btn-select" id="btn_select_11">
                                <span class="cur-select">请选择</span>
                                <select id="info11" onclick="OC_1(this.id)" onchange="OC_1(this.id)">
                                    <option>健康</option>
                                    <option>慢性病</option>
                                    <option>患大病</option>
                                    <option>残疾</option>
                                </select>
                            </div>
                        </form>
                    </th>
                </tr>
                <tr>
                    <th>政治面貌</th>
                    <th>
                        <form>
                            <div class="btn-select" id="btn_select_12">
                                <span class="cur-select">请选择</span>
                                <select id="info12" onclick="OC_1(this.id)" onchange="OC_1(this.id)">
                                </select>
                            </div>
                        </form>
                    </th>
                </tr>
                <tr>
                    <th>是否低保人</th>
                    <th>
                        <form>
                            <div class="btn-select" id="btn_select_13">
                                <span class="cur-select">请选择</span>
                                <select id="info13" onclick="OC_1(this.id)" onchange="OC_1(this.id)">
                                    <option>是</option>
                                    <option>否</option>
                                </select>
                            </div>
                        </form>
                    </th>
                </tr>
                </tbody>
            </table>
            <div align="center">
                <button type="button" class="am-btn am-btn-primary am-radius im-fp-bt-select">保存</button>
            </div>
        </div>
    </div>
</div>

<!--返回按钮-->
<img src="../../../img/Back.png" class="img-left"
     onclick="backBtn()">
<script>

    //返回按钮
    function backBtn() {
        window.location.href = "Member.html";
    }

    //下拉栏js
    var $$ = function (id) {
        return document.getElementById(id);
    };

    function OC_1(i) {
        var btnSelect1;

        switch (i) {
            case 'info1':
                btnSelect1 = $$("btn_select_1");
                break;
            case 'info2':
                btnSelect1 = $$("btn_select_2");
                break;
            case 'info3':
                btnSelect1 = $$("btn_select_3");
                break;
            case 'info4':
                btnSelect1 = $$("btn_select_4");
                break;
            case 'info5':
                btnSelect1 = $$("btn_select_5");
                break;
            case 'info6':
                btnSelect1 = $$("btn_select_6");
                break;
            case 'info7':
                btnSelect1 = $$("btn_select_7");
                break;
            case 'info8':
                btnSelect1 = $$("btn_select_8");
                break;
            case 'info9':
                btnSelect1 = $$("btn_select_9");
                break;
            case 'info10':
                btnSelect1 = $$("btn_select_10");
                break;
            case 'info11':
                btnSelect1 = $$("btn_select_11");
                break;
            case 'info12':
                btnSelect1 = $$("btn_select_12");
                break;
            case 'info13':
                btnSelect1 = $$("btn_select_13");
                break;
            default:
                break;
        }
        var curSelect1 = btnSelect1.getElementsByTagName("span")[0];
        var chgSelect1 = $$(i);
        curSelect1.innerHTML = chgSelect1.value;
    }
</script>
</body>
</html>